<template>
  <div class="api-monitor">
    <Row :gutter="20">
      <Col span="12">
        <div class="echart-wrap">
          <div class="sub-title">节点流量情况</div>
          <div style="width: 100%; height: 480px" ref="ChartBox">折线图</div>
        </div>
      </Col>
      <Col span="12">
        <div class="node-data-table">
          <div class="sub-title">节点流量数据展示</div>
          <InnerPageTable ref="treeTable" :config="pageTableConfig"> </InnerPageTable>
        </div>
      </Col>
    </Row>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  name: 'apiMonitor',
  props: {
    appInfo: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      searchForm: {
        apiDesc: '',
        apiId: '',
        apiPath: this.appInfo.apiPath ? this.appInfo.apiPath : this.appInfo.path, // this.appInfo.resource
        appCode: this.appInfo.appCode,
        // enabled: '',
        groupPath: '',
        id: '',
        requestMethod: '',
        routeId: this.appInfo.routeId,
        tenantCode: this.appInfo.tenantCode
      },
      chart: null,
      title: '',
      datasTitle: ['异常', '拒绝', '通过'],
      xAxisDatas: [],
      y1AxisDatas: [],
      y2AxisDatas: [],
      y3AxisDatas: [],
      pageTableConfig: {
        isPage: false,
        action: null,
        resource: null, //default
        customDataProcess: null, //default
        loadDataFn: this.loadData,
        columnsFn: this.generateColumns,
        autoFirst: true //default false
      }
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.ChartBox)
    // window.$channel.$on('ToggleSidebarMenu', this.resizeEcharts)
    window.addEventListener('resize', this.resizeEcharts)
    this.updataChart()
  },
  beforeDestroy() {
    // window.$channel.$off('ToggleSidebarMenu', this.resizeEcharts)
    window.removeEventListener('resize', this.resizeEcharts)
  },

  methods: {
    resizeEcharts() {
      this.$nextTick(() => {
        this.chart.resize()
      })
    },
    updataChart() {
      var option = {
        color: ['#F78742', '#EC4547', '#17AA6B'],
        title: {
          text: this.title
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          right: '8%',
          data: this.datasTitle
        },
        grid: {
          left: '3%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              formatter: function (data) {
                var text = data
                if (text.indexOf(' ') != -1) {
                  var head = text.split(' ')[0] + '\n' + text.split(' ')[1]
                  text = head
                }
                return text
              },
              lineHeight: 20,
              color: '#778592'
            },
            axisLine: {
              lineStyle: {
                color: '#BFBFBF'
              }
            },
            data: this.xAxisDatas
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#E2E4EA'
              }
            },
            axisLabel: {
              color: '#778592'
            },
            axisLine: {
              lineStyle: {
                color: '#BFBFBF'
              },
              show: false
            }
          }
        ],
        series: [
          {
            name: this.datasTitle[0],
            type: 'line',
            stack: 'Total',
            emphasis: {
              focus: 'series'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(247,135,66,1)'
                },
                {
                  offset: 1,
                  color: 'rgba(247,135,66,0.1)'
                }
              ])
            },
            data: this.y1AxisDatas
          },
          {
            name: this.datasTitle[1],
            type: 'line',
            stack: 'Total',
            emphasis: {
              focus: 'series'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(236,69,71,1)'
                },
                {
                  offset: 1,
                  color: 'rgba(236,69,71,0.1)'
                }
              ])
            },
            data: this.y2AxisDatas
          },
          {
            name: this.datasTitle[2],
            type: 'line',
            stack: 'Total',
            emphasis: {
              focus: 'series'
            },

            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(23,170,107, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(23,170,107,0.1)'
                }
              ])
            },
            data: this.y3AxisDatas
          }
        ]
      }
      this.chart.setOption(option)
    },
    loadData({ responseProcess, param }) {
      return window.$http.post(`${window.RPConfig.mgt}/api/getRealTimeMoni`, this.searchForm).then(({ data }) => {
        this.xAxisDatas = []
        this.y1AxisDatas = []
        this.y2AxisDatas = []
        this.y3AxisDatas = []
        data.data.forEach(element => {
          this.xAxisDatas.push(element.timeStamp)
          this.y1AxisDatas.push(element.abnormalQps)
          this.y2AxisDatas.push(element.blockedQps)
          this.y3AxisDatas.push(element.passQps)
        })
        this.updataChart()
        data.records = data.data
        responseProcess(data)
      })
    },
    generateColumns() {
      return [
        {
          title: this.$t('时间'),
          key: 'timeStamp',
          sortable: 'timeStamp',
          width: 180
        },
        {
          title: this.$t('通过QPS'),
          sortable: 'passQps',
          key: 'passQps'
        },
        {
          title: this.$t('拒绝QPS'),
          sortable: 'blockedQps',
          key: 'blockedQps'
        },
        {
          title: this.$t('异常QPS'),
          sortable: 'abnormalQps',
          key: 'abnormalQps'
        },
        {
          title: this.$t('响应时间（ms）'),
          minWidth: 150,
          sortable: 'avgRt',
          key: 'avgRt'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.api-monitor {
  .ivu-col {
    > div {
      position: relative;
      min-height: 480px;
      border: 1px solid #e2e4ea;
      border-top: none;
      padding: 24px 20px 0;
      &::before {
        content: '';
        position: absolute;
        height: 4px;
        width: 100%;
        top: 0;
        left: -1px;
        background-color: #939ea9;
        box-sizing: content-box;
        border: 1px solid #939ea9;
        border-top: none;
        border-bottom: none;
      }
    }
    .sub-title {
      position: relative;
      font-family: PingFangSC-Medium;
      font-size: 14px;
      color: #111a34;
      letter-spacing: 0;
      font-weight: 500;
      padding-left: 7px;
      height: 30px;
      line-height: 30px;
      &::before {
        content: '';
        position: absolute;
        height: 13px;
        width: 3px;
        top: 50%;
        left: 0;
        background-color: #304777;
        transform: translate(0, -50%);
      }
    }
  }

  .echart-wrap {
  }
  .node-data-table {
    .sub-title {
      margin-bottom: 10px;
    }
    /deep/.single-table-con {
      padding: 0;
    }
  }
}
</style>